<template>
  <div id="app">
    <div v-if="!isLogin">
      <h1>注册</h1>
      <form @submit.prevent="register">
        <input v-model="registerForm.username" type="text" placeholder="用户名" required />
        <input v-model="registerForm.password" type="password" placeholder="密码" required />
        <!-- <button type="submit">注册</button> -->
      </form>
    </div>
    <div v-else>
      <h1>登录</h1>
      <form @submit.prevent="login">
        <input v-model="loginForm.admin_id" type="text" placeholder="用户名" required />
        <input v-model="loginForm.password" type="password" placeholder="密码" required />
        <button type="submit">登录</button>
      </form>
    </div>
    <!-- <button @click="isLogin = !isLogin">{{ isLogin ? '去注册' : '去登录' }}</button> -->
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      isLogin: true,
      registerForm: {
        admin_id: '',
        password: ''
      },
      loginForm: {
        admin_id: '',
        password: ''
      }
    };
  },
  methods: {
    register() {
      // 这里可以添加注册逻辑，例如发送请求到后端
      alert('注册成功！');
      this.isLogin = true;
    },
   login() {
     
        // 发送POST请求到后端的登录API
        axios.post('http://localhost:8090/login', {
          admin_id: this.loginForm.admin_id,
          password: this.loginForm.password
        })
.then(response=>{
  if(response.data==='success'){
    alert('登录成功！');
          // 可以将token保存到localStorage或者Vuex中
          localStorage.setItem('token', response.data.token);
          this.$router.push({ name: 'Admin_Base' });
  }else{
    // 登录失败，显示错误信息
    alert('登录失败，请检查用户名和密码！');
  }
})
// .catch(error=>{
//    // 处理请求错误
//    alert('登录请求失败！');
// })
;
    
  }
}
}
</script>

<style>
#app {
  max-width: 300px;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
